import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { NavParams, ModalController, Events, NavController, Platform } from '@ionic/angular';
import { ActivatedRoute } from '@angular/router';
import { CacheService } from '@services/cache.service';

@Component({
    selector: 'select-voice',
    templateUrl: 'select-voice.html',
    styleUrls: ['select-voice.scss']
})
export class VoiceModal implements OnInit {
    selelctVoice;
    @Input() config;
    vList = [
        { voiceName: '默认', isSelected: false, voicePath: 'assets/mp3/0.mp3' },
        { voiceName: '水泡', isSelected: false, voicePath: 'assets/mp3/1.mp3' },
        { voiceName: '警铃', isSelected: false, voicePath: 'assets/mp3/2.mp3' },
        { voiceName: '布谷', isSelected: false, voicePath: 'assets/mp3/3.mp3' },
        { voiceName: '提醒', isSelected: false, voicePath: 'assets/mp3/4.mp3' }
    ];

    constructor(
        public activatedRoute: ActivatedRoute,
        public modalCtrl: ModalController,
        public events: Events,
        private navCtrl: NavController,
        private platform: Platform,
        private cache: CacheService
    ) {
        // this.platform.backButton.subscribe(res => {
        //     this.closeModal();
        // })
    }

    ngOnInit() {
        const selelctedName: string = this.config.musicType;
        for (let i = 0; i < this.vList.length; i++) {
            if (this.vList[i].voiceName === selelctedName) {
                this.vList[i].isSelected = true;
            }
        }
    }

    selectVoice = function (index) {
        for (let i = 0; i < this.vList.length; i++) {
            this.vList[i].isSelected = false;
            // const auto = <HTMLAudioElement>document.getElementById('voice' + i);
            const auto = <HTMLAudioElement>document.getElementById('voicePlay');
            auto.pause();
        }
        this.vList[index].isSelected = true;

        // 1.播放音乐
        const auto = <HTMLAudioElement>document.getElementById('voicePlay');
        auto.setAttribute('src', this.vList[index].voicePath);
        auto.play();
        // const myauto = <HTMLAudioElement>document.getElementById('voice' + index);
        // myauto.play();
        this.selelctVoice = this.vList[index];
        this.events.publish('voiceType', this.selelctVoice);
    };

    closeModal() {
        this.modalCtrl.dismiss();
    }

    navPop() {
        this.navCtrl.pop();
    }
}
